import React, { PureComponent } from 'react'
import { connect } from 'react-redux'
import {
  WriterWrapper,
  WriterTitile,
  WriterInfoSwitch,
  WriterInfoList,
  WriterInfoItem,
  WriterMore
} from '../style'

class Writer extends PureComponent {
  render() {
    const { list } = this.props
    return (
      <WriterWrapper>
        <WriterTitile>
          推荐作者
          <WriterInfoSwitch>
            <i className="sky-leaf spin">&#xe851;</i>
            换一批
          </WriterInfoSwitch>
        </WriterTitile>
        <WriterInfoList>
          {list.map(item => {
            return (
              <WriterInfoItem key={item.get('id')}>
                <img className="pic" src={item.get('imgUrl')} alt="" />
                <div className="content">
                  <div className="author">{item.get('author')}</div>
                  <div className="desc">{item.get('desc')}</div>
                </div>
                <div className="follow">关注</div>
              </WriterInfoItem>
            )
          })}
        </WriterInfoList>
        <WriterMore>
          查看全部
          <i className="sky-leaf">&#xe62b;</i>
        </WriterMore>
      </WriterWrapper>
    )
  }
}

const mapState = state => ({
  list: state.getIn(['home', 'writerList'])
})

export default connect(
  mapState,
  null
)(Writer)
